<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>公司管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :model="companyInfo" label-width="100px">
			<el-form-item label="公司名称">
				<el-input v-model="companyInfo.companyName"></el-input>
			</el-form-item>
			<el-form-item label="公司地址">
				<el-input v-model="companyInfo.companyAddress"></el-input>
			</el-form-item>
			<el-form-item label="联系电话">
				<el-input v-model="companyInfo.companyPhone"></el-input>
			</el-form-item>
			<el-form-item label="公司邮件">
				<el-input v-model="companyInfo.companyEmial"></el-input>
			</el-form-item>
			<el-form-item label="公司简介">
				<el-input v-model="companyInfo.companyIntroduce"></el-input>
			</el-form-item>
			<el-form-item label="公司图片">
				<!-- <el-input v-model="companyInfo.companyImage"></el-input> -->
				<el-upload :action="url+'upload'" list-type="picture-card" :on-success="handleSuccess" :limit="1"
					:on-preview="handlePictureCardPreview" :file-list="fileList" :on-remove="handleRemove">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</el-form-item>
			<el-form-item label="公司二维码">
				<el-upload :action="url+'upload'" list-type="picture-card" :on-success="handleSuccess1" :limit="1"
					:on-preview="handlePictureCardPreview1" :file-list="fileList1" :on-remove="handleRemove1">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible1">
					<img width="100%" :src="dialogImageUrlM" alt="">
				</el-dialog>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="clearCompanyInfo">清空</el-button>
				<el-button type="primary" @click="saveCompanyInfo">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		url
	} from '../../util/tool.js'
	export default {
		data() {
			return {
				companyInfo: { // 公司对象信息
					"companyId": "",
					"companyName": "",
					"companyAddress": "",
					"companyPhone": "",
					"companyEmial": "",
					"companyIntroduce": "",
					"companyImage": "",
					"companyCode": "",
				},
				dialogImageUrl: '', // 预览图片路径
				dialogImageUrlM: '', // 预览二维码图片路径
				dialogVisible: false, // 预览图片的对话框
				dialogVisible1: false, // 预览二维码的对话框
				url: "",
				fileList: [],
				fileList1: []
			}
		},
		methods: {
			// 公司图片
			// 处理上传成功的函数
			handleSuccess(response) {
				// 把上传后的图片路径，交给公司对象的companyImage
				// console.log(response)
				this.companyInfo.companyImage = response.message;
			},

			// 删除图片的事件
			handleRemove(file, fileList) {
				// console.log(file, fileList);
				// 移除数据
				this.companyInfo.companyImage = '';
			},

			// 预览图片事件
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			// 处理上传成功的函数
			// 公司二维码
			handleSuccess1(response) {
				// console.log(response)
				// 把上传后的二维码图片路径，交给公司对象的companyImage
				this.companyInfo.companyCode = response.message;
			},

			// 删除二维码图片的事件
			handleRemove1(file, fileList) {
				// console.log(file, fileList);
				// 移除数据
				this.companyInfo.companyCode = '';
			},

			// 预览二维码图片事件
			handlePictureCardPreview1(file) {
				this.dialogImageUrlM = file.url;
				this.dialogVisible1 = true;
			},
			// 清空公司内容
			clearCompanyInfo() {
				let id = this.companyInfo.companyId
				this.companyInfo = {
					"companyId": id,
					"companyName": "",
					"companyAddress": "",
					"companyPhone": "",
					"companyEmial": "",
					"companyIntroduce": "",
					"companyImage": "",
					"companyCode": "",
				}
			},
			//	保存公司内容
			saveCompanyInfo() {
				this.$http.put("company", this.companyInfo)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success("修改成功！")
						} else {
							this.$message.error("修改失败！")
						}
					})
			},
			// 分页查询所有的数据
			queryList() {
				//	调用后端接口
				this.$http.post('company/select',
						this.companyInfo
					)
					.then(res => {
						if (res.data.status == 200) {
							this.companyInfo = res.data.data
							let urls = this.url + 'download?filename=' + res.data.data.companyImage;
							let that = this.url
							// 动态的获取图片的名称并帮到到fileList
							this.fileList = [{
								name: res.data.data.companyImage,
								url: urls
							}];
							// 二维码
							this.fileList1 = [{
								name: res.data.data.companyCode,
								url: that + 'download?filename=' + res.data.data.companyCode
							}];
						} else {
							this.$message.error("查询失败")
						}
					})
			}
		},
		mounted() {
			this.queryList()
			// 动态的获取tool.js中的url，并赋值给当前组件的全局url
			this.url = url;
		}
	}
</script>
<style>
	/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
	.ql-container {
		min-height: 200px;
	}

	.el-breadcrumb {
		margin-bottom: 15px;
		padding: 0 0 15px;
		border-bottom: 1px solid #ddd;
	}

	.el-pagination {
		margin-top: 15px;
	}

	.el-link {
		padding: 0 5px;
	}
</style>